<template>
	<view class="user plr30 pb50 border-box column">
		<view class="justify-between align-end" style="padding-top: 153rpx">
			<view class="flex-1 justify-start align-center">
				<view class="bgf centerV" style="width: 107rpx; height: 107rpx; border-radius: 50%">
					<u-avatar :src="userInfo.head_img" size="103rpx" />
				</view>
				<view class="ml9 flex-1" @click="navToPage(true,'pages/user/info')">
					<view class="fs34 bold">{{userInfo.nickname||'未登录,点击登录'}}</view>
					<view class="justify-start align-center mt5">
						<view class="pb5 fs26 color6">个人资料</view>
						<u-icon name="arrow-right" color="#6E6E6E" size="22rpx" />
					</view>
				</view>
			</view>
			<view class="column justify-end pb16 h100" @click="navToPage(true,'pages/user/customer')">
				<view class="center">
					<u-icon name="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/user/kefu.png" size="44rpx" />
					<view class="ml6">联系客服</view>
				</view>
			</view>
		</view>
		<!-- 会员 -->
		<view class="member">
			<view class="pt7 pl9">
				<u-image src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/user/member.png" height="135rpx"
					width="135rpx"></u-image>
			</view>
			<view class="ml27 column justify-center align-start flex-1">
				<view class="name">vip会员</view>
				<view class="time" v-if="userInfo.vip_id">{{userInfo.vip_end_time}}到期</view>
			</view>
			<view class="renew" @click="navToPage(true,`pages/user/vip/${userInfo.is_apply==1?'index':'apply'}`)">
				<view class="mr10">
					<text v-if="userInfo.vip_id">去续费</text>
					<text v-else>去开通会员</text>
				</view>
				<u-icon name="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/user/toopen.png" size="31rpx" />
			</view>
		</view>
		<!-- 账户余额 -->
		<view class="account active_bg" @click="navToPage(true, 'pages/user/surplus/index')">
			<view class="name">账户余额（元）</view>
			<view class="value">
				<u-count-to :startVal="0" :endVal="userInfo.amount" :decimals="2" color="#000000" fontSize="50rpx"
					:duration="500" />
			</view>
		</view>
		<view class="car">
			<view class="title">
				<u-icon name="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/user/car.png" size="44rpx" />
				<view class="ml16">车源管理</view>
			</view>
			<view class="car-items">
				<view class="item" @click="navToPage(true,item.nav)" v-for="(item,index) in vehicleSources" :key="index">
					<view class="num">
						<u-count-to :startVal="0" :endVal="item.num" color="#000000" fontSize="50rpx" :duration="500" />
					</view>
					<view class="title">{{item.label}}</view>
				</view>
			</view>
		</view>
		<view class="other">
			<view class="title">
				<u-icon name="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/user/other.png" size="44rpx" />
				<view class="ml16">其他服务</view>
			</view>
			<view class="other-items mt35 column">
				<view class="item" v-for="(item, index) in others" :key="index" @click="navToPage(item.isLogin, item.nav)">
					<view class="name">{{ item.label }}</view>
					<u-icon name="arrow-right" color="#969696" size="18rpx" />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,watch
	} from 'vue';
	import {
		checkLogin,
		navTo,
		navToPage
	} from '@/core/app.js';
	import {
		getInfo,
	} from "@/api/user/index";
	import {
		useStore
	} from "vuex";
	import {
		onShow
	} from "@dcloudio/uni-app";
	const userInfo = ref({
		head_img: '',
		nickname: '',
		amount: '0.00',
		is_apply: '0'
	})

	onShow(() => {
		if (checkLogin()) {
			getUserInfo()
		} else {
			userInfo.value = {
				head_img: '',
				nickname: '',
				amount: '0.00',
				is_apply: '0'
			}
		}
	})
	const store = useStore()
	const getUserInfo = async () => {
		let res = await getInfo()
		if (res) {
			userInfo.value = res.data
			
			store.commit('SET_USER_INFO', res.data)
		}
	}
	
	watch(
		() => userInfo.value,
		(newVal) => {
			
			vehicleSources.value[0].num = newVal.car.car_source
			vehicleSources.value[1].num = newVal.car.car_wholesale
			vehicleSources.value[5].num = newVal.car.car_acquisition
			
			vehicleSources.value[4].num = newVal.car.car_purchase_requisition
		}
	);
	const vehicleSources = ref([{
			label: '我的车源',
			nav: 'pages/user/car/my-source',
			num:0,
		},
		{
			label: '批发车源',
			nav: 'pages/user/car/wholesale',
			num:0,
		},
		{
			label: '朋友圈车源',
			nav: 'pages/user/car/circle',
			num:0,
		},
		{
			label: '我的询价',
			nav: 'pages/user/car/price_inquiry/index',
			num:0,
		},
		{
			label: '我的求购',
			nav: 'pages/user/car/want_to_buy',
			num:0,
		},
		{
			label: '我的收购',
			nav: 'pages/user/car/acquisition',
			num:0,
		},]
	)
	const others = [{
			label: '消息管理',
			nav: 'pages/message/index',
			isLogin: true,
		},
		{
			label: '我的收藏',
			nav: 'pages/user/collect',
			isLogin: true,
		},
		{
			label: '浏览记录',
			nav: 'pages/user/browse',
			isLogin: true,
		},
		{
			label: '商家认证',
			nav: 'pages/user/authentication',
			isLogin: true,
		},
		{
			label: '邀请好友',
			nav: 'pages/user/invite/index',
			isLogin: true,
		},
		{
			label: '关于我们',
			nav: 'pages/user/about/index',
			isLogin: false,
		},
	];
</script>

<style lang="scss" scoped>
	.user {
		width: 100%;
		background: url('https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/user/bg.png') no-repeat;
		background-size: 100% 807rpx;
		background-position: 0rpx 0rpx;
	}

	.member {
		width: 100%;
		height: 148rpx;
		margin-top: 29rpx;
		border-radius: 20rpx;
		background: linear-gradient(90deg, #161714 0%, #3a3a3a 100%);
		display: flex;
		justify-content: space-between;
		align-items: center;

		.name {
			font-weight: bold;
			font-size: 32rpx;
			color: #fdebbc;
		}

		.time {
			margin-top: 9rpx;
			font-weight: 400;
			font-size: 22rpx;
			color: #b4a580;
		}

		.renew {
			padding: 16rpx 23rpx 16rpx 27rpx;
			box-sizing: border-box;
			background: linear-gradient(90deg, #fce09e 0%, #fae8c9 100%);
			border-radius: 34rpx;
			font-weight: bold;
			font-size: 26rpx;
			color: #543804;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 32rpx;
		}
	}

	.account {
		height: 138rpx;
		padding: 0 53rpx 0 29rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.name {
			font-weight: 400;
			font-size: 24rpx;
			color: #484848;
		}

		.value {
			font-family: DIN Alternate, DIN Alternate;
			font-weight: bold;
			font-size: 50rpx;
			color: #000000;
		}
	}

	.car {
		padding: 38rpx 30rpx 32rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 20rpx;

		.title {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}

		.car-items {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 23rpx 21rpx;
			margin-top: 36rpx;

			.item {
				width: 100%;
				height: 149rpx;
				background: #f4f5f9;
				border-radius: 20rpx;
				padding: 22rpx 29rpx 27rpx;
				box-sizing: border-box;

				.num {
					font-family: DIN Alternate, DIN Alternate;
					font-weight: bold;
					font-size: 50rpx;
					color: #000000;
				}

				.title {
					margin-top: 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #484848;
				}
			}
		}
	}

	.other {
		padding: 38rpx 30rpx 32rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 20rpx;

		.title {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}

		.other-items {
			.item {
				margin: 26rpx 0rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				display: flex;
				justify-content: space-between;
				align-content: center;
			}
		}
	}
</style>